html, body { height:100%; margin:0; padding:0;}
body { background:#FFF; color:#222222; font:normal 14px/18px Arial, Helvetica, sans-serif;}
form, body, iframe { margin:0; padding:0;}
img, table, iframe { border:0;}
p {margin:0; margin-bottom:15px;}
a {color:#360; text-decoration:none; }
a:hover { color:#690; text-decoration:underline; }
.layout { position:relative; width:1000px; margin:0 auto; height:auto !important; *height:100%; min-height:100%;}
.left {float:left;} 

#header {
    background-color: #000;
    height: 120px;
    margin-bottom: 20px;
    position:relative;
}

.logo a { display:block; width:360px; height:88px; background:url(images/logo.png) no-repeat 20px 10px; overflow:hidden; text-indent:-999px;}

#menubar {
    position:absolute;
    right:10px;
    bottom:0;
}

#loginbox {
    float:right;
    margin:20px 20px 0 0;
    color: #fff;
}

#loginbox a, #loginbox a:hover, #loginbox a:visited, #loginbox a:active {
    text-decoration: none;
    color: #fff;
}

.menu,.menu:hover,.menu:active,.menu:visited,.act,.act:hover,.act:active,.act:visited {
    background: transparent url('images/menu-background.png') no-repeat bottom left;
    color: #000;
    display: block;
    float: left;
    height: 28px;
    margin-right: 6px;
    text-decoration: none;
    width: 100px;
}

.menu span, .act span {
    line-height: 18px;
    text-align: center;
    display: block;
    padding: 5px 0 5px 5px;
    line-height: 150%;
}

.menu:hover, .act,.act:hover,.act:active,.act:visited {
    background-position: top left;
}

.clear {
    overflow: hidden;
}

/*  button for Group */

a.gropen, a.grclosed, a.gropen-hl, a.grclosed-hl {
    position:relative;
    display: block;
    float: left;
    height: 29px;
    text-decoration: none;
    margin-bottom: 3px;
    /*text-align:center;*/
   /*margin-left: 15px;*/
}

.groupname {
    margin-left: 60px;
}

a.gropen, a.grclosed {
    color: #000;
}

a.gropen-hl, a.grclosed-hl {
    color: #fff;
}

a.gropen span, a.grclosed span, a.gropen-hl span, a.grclosed-hl span
{
    line-height:29px;
}

a.gropen, a.gropen-hl {
    background-image: url('images/groupeopen.png');
    background-repeat: no-repeat;
    width: 254px; 
}


a.grclosed, a.grclosed-hl {
    background-image: url('images/groupeclosed.png');
    background-repeat: no-repeat;
    width: 219px; 
}


.green-bg, .green-sm {background-position: 0 0;}
.green-bg:hover {background-position: -254px 0;}
.green-sm:hover {background-position: -219px 0;}
.orange-bg, .orange-sm {background-position: 0 -29px;}
.orange-bg:hover {background-position: -254px -29px;}
.orange-sm:hover {background-position: -219px -29px;}
.yellow-bg, .yellow-sm {background-position: 0 -58px;}
.yellow-bg:hover {background-position: -254px -58px;}
.yellow-sm:hover {background-position: -219px -58px;}
.blue-bg, .blue-sm {background-position: 0 -87px;}
.blue-bg:hover {background-position: -254px -87px;}
.blue-sm:hover {background-position: -219px -87px;}
.purple-bg, .purple-sm {background-position: 0 -116px;}
.purple-bg:hover {background-position: -254px -116px;}
.purple-sm:hover {background-position: -219px -116px;}
.grey-bg, .grey-sm {background-position: 0 -145px;}
.grey-bg:hover {background-position: -254px -145px;}
.grey-sm:hover {background-position: -219px -145px;}

.group-background
{
    position:relative;
    float:left;
}


.group-button
{
    position:absolute;
    top:7px;
    left:5px;
}


.group-button a
{
        background-color:transparent;
        height:12px;
        display:block;
        float:left;
        margin-left:2px;

}
.group-button a:hover
{
        background-color:#FFF;
        filter:alpha(opacity=70);
        -khtml-opacity: 0.7;
        -moz-opacity: 0.7;
        opacity:0.7;
}

.add-group,.post-tweet { margin:10px auto; padding:0; text-align:center; font-weight: bold;}
.add-group a,.post-tweet a { padding:0 15px 0 0; *padding:0 30px 0 0;  }

/* TODO */
.error {
    color: red;
}

#groups {
    width: 219px;
    padding-top:5px;
    margin: 0;  
    float: left;    

}

#details {
}

/*- User info styles -*/
.userinfo {
    float:left;
    width:150px;
    margin:10px 10px 0 10px;
}

.userinfo a {
    margin:0 0 0 5px;
}


.userinfo_pic {
    float:left;
    width:58px;
    height:52px;
    margin-bottom:15px; 
}

.icon-details { position:absolute; left:-1000px; top:-1000px; display:none; z-index:100;}
.transparent09 { background-color:#FFF; filter:alpha(opacity=90); -khtml-opacity: 0.9; -moz-opacity: 0.9; opacity:0.9;}


.userinfo_screenname, .userinfo_realname { float:right; margin:0 0 3px 5px; width:6em;}
.userinfo_screenname { margin:0;  font-weight: bold;}
.userinfo_screenname a, .userinfo_screenname a:hover, .userinfo_screenname a:visited, .userinfo_screenname a:active { margin:0;  padding:0; text-decoration:none; color: #000; font-weight: bold;}

/*- Userpic info border styles -*/

.utop, .ubottom {display:block; background:transparent; font-size:1px;}
.ub1, .ub2, .ub3, .ub4 {display:block; overflow:hidden;}
.ub1, .ub2, .ub3 {height:1px;}
.ub2, .ub3, .ub4 {background:#bee486; border-left:1px solid #bee486; border-right:1px solid #bee486;}
.ub1 {margin:0 5px; background:#bee486;}
.ub2 {margin:0 3px; border-width:0 2px;}
.ub3 {margin:0 2px;}
.ub4 {height:2px; margin:0 1px;}

.userpic-box-content
{
    display: block;
    background: #bee486;
    border: 0 solid #bee486;
    border-width: 0 1px;
    padding:2px 2px 2px 4px;
}

.short_details {width: 58px; }
.short_details .userinfo_screenname, .short_details .userinfo_realname {
   display: none;
}

.input-field {font-size: 14px; line-height:120%; border: 1px solid #bee486; -moz-border-radius: 5px; -webkit-border-radius: 5px; width:35em; margin:5px 0 5px 5px; background:#bee486;} 

/*- Group info border styles -*/
#group-box
{
    float:right;
    width:761px;
    background: transparent;
    margin:0 0 0 20px;
}

.gtop, .gbottom {display:block; background:transparent; font-size:1px;}
.gb1, .gb2, .gb3, .gb4 {display:block; overflow:hidden;}
.gb1, .gb2, .gb3 {height:1px;}
.gb2, .gb3, .gb4 {background:#FFF; border-left:1px solid #bee486; border-right:1px solid #bee486;}
.gb1 {margin:0 5px; background:#bee486;}
.gb2 {margin:0 3px; border-width:0 2px;}
.gb3 {margin:0 2px;}
.gb4 {height:2px; margin:0 1px;}

.group-box-content
{
    display: block;
    background: #FFF;
    border: 0 solid #bee486;
    border-width: 0 1px;
    padding:5px 5px 5px 40px;
}

.clear-div
{
    clear: both;  
    height:1px;
}

.footer 
{ 
/*
    position: absolute; 
    bottom:0;
    right:10px;
*/
    clear: both;
    padding-top: 20px;
}

.copy { padding:0; margin:0 0 1em; color:#333; font: bold 14px/20px Arial, Helvetica, sans-serif; text-align:right;}
.bmenu { padding:0 0 10px 0; margin:0 0 1em; font:bold 12px/20px Arial, Helvetica, sans-serif; text-align:right;}
.bmenu a, .copy a { color:#333; text-decoration:none;}
.bmenu a:hover, .copy a:hover { text-decoration:underline;}

.group-header
{
    float:left;
    margin:0;
}

.radiobutton { float:right; margin:10px 10px 5px 0; }

.opml-link { float: left; margin: 5px;}
.opml-link input {width:45em;}

#progress {padding: 50px; text-align:center; width:100%;}
.tip { font-style:italic; color:#666; margin:3px 0; }

.user-edit-buttons {float: left; clear:left; width:58px;}
.user-edit-buttons a { margin:0 0 0 5px;}

#tt-screen {font-weight:bold;}

.prefs { margin:0 0 2em 0;}
.prefs label { margin:0 2em 0 0;} 
.prefs a, .sync-friends a { color:#2c4b00; display:block; float:left; margin:0.5em 0.5em 0.2em 0; padding:0.3em 1em; width: 5em; text-decoration:none; text-align:center; }  
.prefs a:hover, .sync-friends a:hover { color:#528b00; }            
.prefs span { font-weight:bold;}
.prefs-box-content {display: block; background: #bee486; border: 0 solid #bee486; border-width: 0 1px; padding:2px 2px 2px 4px; } 
.white .ub2, .white .ub3, .white .ub4, .white .prefs-box-content { border-color:#528b00; background: #dce9c8;}
.white .ub1 {background:#528b00;}    
.sync-friends {}

h1, h1 a { margin:0.8em 0 0.8em 0; padding:0; color: #528b00; font-size:1.7em;}
h2, h2 a { margin:0.5em 0 0.3em 0; padding:0; color: #963fcf; font-size:1.3em;}

.red-txt {color:#ff3300;}
red .gb2, .red .gb3, .red .gb4 {background-color:#FFF; border-left:1px solid #ff3300; border-right:1px solid #ff3300;}
.red .gb1 {margin:0 5px; background-color:#ff3300;}
.red .group-box-content { border: 0 solid #ff3300; border-width: 0 1px;}

.purple-txt {color:#6e02b5; font-weight:bold;}
.purple .gb2, .purple .gb3, .purple .gb4 {background-color:#FFF; border-left:1px solid #8a26cc; border-right:1px solid #8a26cc;}
.purple .gb1 {margin:0 5px; background-color:#8a26cc;}
.purple .group-box-content, .purple .more-box-content { border: 0 solid #8a26cc; border-width: 0 1px;}
.purple .input-field {background:#bc90da; border: 1px solid #bc90da;}
.purple a { color:#963fcf; font-weight:bold; }
.line { background: url(images/line.gif) repeat-x; width:100%; height:1px; margin:5px 0;clear:both;}
.msg-edit-buttons { float:right; clear:left; margin:5px 0;}
.msg-edit-buttons a { margin:0 0 0 10px;}
.usermsg {float:left; margin:10px 10px 0 10px; font:normal 12px/18px Arial, Helvetica, sans-serif; width: 95%; }
.msg-date {color:#999; font-style:italic; font-size: 11px; padding-left:5px;}
.usermsg .userinfo_pic { margin-bottom:0; }
.lt-purple .gb2, .lt-purple .gb3, .lt-purple .gb4 {background-color:#f3e1ff;}
.dk-purple .gb2, .dk-purple .gb3, .dk-purple .gb4 {background-color:#d1b1e5;}
.more-box-content { text-align:center; color:#6e02b5; background: #d1b1e5 url(images/bt-line.png) repeat-x; min-height:22px;}

.direct-msg, .new-tweet {float: left; clear:left; width: 16em; color:#427700; padding:10px;}
.direct-msg label, .new-tweet label {font-size:12px;}
.direct-msg textarea, .new-tweet textarea{ clear:both; width:100%; height:4em; margin:3px 0}
.number {float:right; color:#bce384; font:bold 16px/20px Verdana, Arial, Helvetica, sans-serif; *margin-top:-18px;}

.color-txt {color:#528b00; font-weight:bold;}
.purple .color-txt {color:#6e02b5;}


.unread {padding:5px;}

.tweet-image {display: block; }

.bold { font-weight: bold; }


a.user-link { word-break: break-all; word-wrap: break-word; }
